<template>
  <section class="w3l-form-36">
    <div class="form-36-mian section-gap">
      <div class="wrapper">
        <div class="form-inner-cont">
          <h3>注册账号</h3>
          <form action="#" method="post" class="signin-form">
            <div class="form-input">
              <span class="fa fa-envelope-o" aria-hidden="true"></span> <input v-model="userRegisterForm.username" type="text" name="text" placeholder="用户名" required />
            </div>
            <div class="form-input">
              <span class="fa fa-key" aria-hidden="true"></span> <input v-model="userRegisterForm.password" type="password" name="password" placeholder="密码" required />
            </div>
            <div class="form-input">
              <span class="fa fa-key" aria-hidden="true"></span> <input v-model="userRegisterForm.rePassword" type="password" name="password" placeholder="再次输入密码" required />
            </div>
            <div class="login-remember d-grid">
              <button @click="doRegister" class="btn theme-button">注册</button>
            </div>
          </form>
          <p class="signup">已有帐号? <a href="/userLogin" class="signuplink">去登陆</a></p>
        </div>

        <!-- copyright -->
        <div class="copy-right">
          <p>Copyright &copy; 2024.Student 基于Java的宠物美容与护理管理系统.</p>
        </div>
        <!-- //copyright -->
      </div>
    </div>
  </section>
</template>

<script>
import axios from "axios";

export default {
  name: "UserRegister",
  data() {
    return {
      userRegisterForm: {
        username: '',
        password: '',
        rePassword: '',
      },
    };
  },
  methods: {
    doRegister(){
      axios.post("http://localhost:8088/user/register",this.userRegisterForm)
          .then(response => {
            if (response.data.code != 200){
              alert("数据不合法，或账号已经存在")
            }else {
              this.$router.push("/userLogin");
            }
            console.log(response)
          })
          .catch(error => {
            alert("注册失败")
            console.log(error)
          })
    }
  }
}
</script>

<style scoped>
@import "@/assets/userRegister/css/style.css";
@import "@/assets/userRegister/css/font-awesome.css";
</style>